<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="CheckAll()">
    <input type="button" value="取消" onclick="CancleALL()">
    <input type="button" value="反选" onclick="ReverseALL()">


    <table  border="1">
        <thead>
          <tr>
              <th>序号</th>
              <th>用户名</th>
              <th>密码</th>
          </tr>

        </thead>

        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>11</td>
                <td>111</td>
            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>22</td>
                <td>222</td>
            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>33</td>
                <td>333</td>
            </tr>
        </tbody>
    </table>

    <script>
        function CheckAll() {
            var t1 = document.getElementById("tb");
            var t2=t1.children;
            for(var i=0;i<t2.length;i++)
            {
                t3=t2[i].firstElementChild.firstElementChild;
                t3.setAttribute("checked","checked");
                t3.checked = true;
            }

        }

        function CancleALL() {
            var t1 = document.getElementById("tb");
            var t2=t1.children;
            for(var i=0;i<t2.length;i++)
            {
                t3=t2[i].firstElementChild.firstElementChild;
                t3.removeAttribute("checked")
                t3.checked = false
            }

        }

        function ReverseALL() {
            var t1 = document.getElementById("tb");
            var t2=t1.children;
            for(var i=0;i<t2.length;i++)
            {
                t3=t2[i].firstElementChild.firstElementChild;
                var val =t3.getAttribute("checked");
                if ((t3.checked==true || val=="checked" )&&t3.checked!=false){t3.checked=false;t3.removeAttribute("checked")}
                else{t3.checked=true;t3.setAttribute("checked","checked");}
            }

        }
    </script>
</body>
</html>